<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="新人商品" name="goods">
          <GoodsList v-if="activeName === 'goods'" />
        </el-tab-pane>
        <el-tab-pane label="购买记录" name="log">
          <BuyLogList v-if="activeName === 'log'" />
        </el-tab-pane>
        <el-tab-pane label="新人专区设置" name="set">
          <NewcomerSet v-if="activeName === 'set'" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import GoodsList from './goods/index.vue'
import BuyLogList from './buy-log/index.vue'
import NewcomerSet from './newcomer-set/index.vue'
export default {
  name: 'Newcomer',
  components: {
    GoodsList,
    BuyLogList,
    NewcomerSet
  },
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState('base', ['tab_key']),
    activeName: {
      get() {
        return this.tab_key ? this.tab_key : 'goods'
      },
      set(val) {
        this.SET_TABS_TYPE({ value: val })
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations('base', ['SET_TABS_TYPE']),
    handleClick({ name }) {
      this.SET_TABS_TYPE({ value: name })
    },
    // 快递配置
    expressHandle() {
      this.$router.push({ name: 'ExpressConfig' })
    },
    // 新增模板
    addTemplate() {
      this.$router.push({ name: 'AddExpressTemplate' })
    },
    // 新增快递公司
    addCompany() {
      this.$router.push({ name: 'AddCompany' })
    }
  }
}
</script>

<style lang="scss" scoped></style>
